<template>
    <div class="project-tree">
        <el-popover placement="bottom-start" trigger="click" v-model="popoverVisible" popper-class="popover-project-container">
            <organize-tree
            :tree-data="treeData"
            @update-selected-node="updateSelectedNode"
            :expanded-keys="expandedKeys"></organize-tree>
            <a slot="reference">{{selectedNodeName}}<i class="el-icon-arrow-down"></i></a>
        </el-popover>
    </div>
</template>

<script>
import OrganizeTree from '@/components/organizeTree.vue'
export default {
    name: 'projectSelectTree',
    components: {
        OrganizeTree
    },
    data() {        
        return {
            selectedNode: null,
            popoverVisible: false,
            treeData: [],
            expandedKeys: [],
        }
    },
    computed: {
        selectedNodeName () {
            return this.selectedNode && this.selectedNode.nodeName;
        }
    },
    mounted() {
        this.getProjectTree();
    },
    methods: {
        async getProjectTree() {
            // this.$api.getOrgProjectTree
            let res = await this.$Geting('/project-tree.json', {
                nodeId: '',
                nodeType: '',
                layer: ''
            });
            console.log(res);
            if (res.code === '0') {
                let treeData = res.data.treeData;
                let iteratorFn = function (data) {
                    let result = data.map(item => {
                        if (item.childList && item.childList.length) {
                            item.childList = iteratorFn(item.childList);
                        }
                        return item;
                    });
                    return result;
                };
                // 递归获取第一个楼盘数据
                let getDefaultNode = function (data) {
                    let result;
                    data.forEach(item => {
                        if (result) return; // 获取到第一个楼盘项目即返回
                        if (+item.nodeType === 5) {
                            result = {...item};
                        }
                        if (item.childList && +item.nodeType !== 5) {
                            result = getDefaultNode(item.childList);
                        }
                    });
                    return result;
                };
                this.treeData = iteratorFn([treeData]);
                this.selectedNode = getDefaultNode([treeData]);
                this.expandedKeys = [this.selectedNode.nodeId];
                // this.$emit('change-node', this.selectedNode);
            }
        },
        // 更新组织树的选择节点
        updateSelectedNode (selectedNode) {
            console.log('selected node', selectedNode);
            this.selectedNode = selectedNode;
            this.popoverVisible = false; // 选中后收起项目列表
            // this.$emit('change-node', this.selectedNode);
        },
    }
}
</script>

<style lang="scss" scoped>
.searchPid {
    width: 202px;    
}
.searchPid input {
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    padding: 0 15px;
    width: 100%;
    height: 32px;
    line-height: 32px;
    background: none;
    &:focus {
        outline: none;
        border-color: #4a8df0!important;
    }
}
</style>